<!--
 * @Author: your name
 * @Date: 2021-08-23 16:30:12
 * @LastEditTime: 2021-10-02 18:36:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ewshop\ewshop\src\views\home\Home.vue
-->
<template>
  <div id="home">
      <NavBar>
          <template v-slot:default>
              图书兄弟
          </template>
      </NavBar>
      <!-- 这里之所以多写一个这个组件，是因为下面的那个被wrapper包裹了，被影响了 -->
      <TabControl v-show="isTabFixed" :titles="['畅销','新书','精选']" @tabClick="tabClick"></TabControl>
      <div class="wrapper">
        <div class="content">
            <div ref="banref">
                <HomeSwiper :banners="banners"></HomeSwiper>
                <RecommendView :recommends="recommends"></RecommendView>
            </div>
            

            <TabControl :titles="['畅销','新书','精选']" @tabClick="tabClick"></TabControl>

            <GoodsList :goods="showGoods"></GoodsList>
        </div>
      </div>
      <!-- 跟导航栏一起显示 -->
      <BackTop @bTop="bTop" v-show="isTabFixed"></BackTop>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import BackTop from 'components/common/backtop/BackTop'
import RecommendView from './ChildComps/RecommendView.vue'
import TabControl from 'components/content/tabControl/TabControl.vue'
import GoodsList from 'components/content/goods/GoodsList'
import {onMounted, reactive, ref,computed,watchEffect,nextTick} from 'vue';
import {getHomeAllData,getHomeGoods} from 'network/home'
import BetterScroll from 'better-scroll'//引入BetterScroll
import HomeSwiper from './ChildComps/HomeSwiper.vue';

export default {
    name:'Home',
    components:{NavBar,RecommendView,TabControl,GoodsList,BackTop,HomeSwiper},
    setup(){

        let isTabFixed = ref(false);
        // 与类名一致可以自动绑定到对应的DOM上
        let banref = ref(null);
        let banners = ref([])
        const recommends = ref([]);
        // 商品列表数据模型
        const goods = reactive({
            sales:{page:1,list:[]},
            new:{page:1,list:[]},
            recommend:{page:1,list:[]},
        })
        let currentType = ref('sales');
        let bscroll = reactive({});

        const showGoods = computed(()=>{
            return goods[currentType.value].list
        })
        onMounted(()=>{
            // 获取推荐内容
            getHomeAllData().then(res=>{
                // console.log(res.slides);
                banners.value = res.slides
                recommends.value = res.goods.data
            }).catch(err=>{
                console.log(err);
            })
            // 获取三种类型的书籍
            getHomeGoods('sales').then(res=>{
                // console.log(res);
                goods.sales.list = res.goods.data;
            })
            getHomeGoods('recommend').then(res=>{
                // console.log(res);
                 goods.recommend.list = res.goods.data;
            })
            getHomeGoods('new').then(res=>{
                // console.log(res);
                 goods.new.list = res.goods.data;
            })
            

            // 创建BetterScroll对象
            bscroll = new BetterScroll(document.querySelector('.wrapper'),{
                probeType:3,//0,1,2,3;3只要运动就触发scroll事件
                click:true,//是否允许点击
                pullUpLoad:true,//上拉加载更多，默认是fales
            });


            
            // 触发滚动事件
            bscroll.on('scroll',(position)=>{
                // console.log(banref.value.offsetHeight); 
                // console.log(position.y);
                isTabFixed.value = (-position.y)>banref.value.offsetHeight;
            })

            // 上拉加载数据，触发pullingUp
            bscroll.on("pullingUp",()=>{
                // console.log('触发了上拉事件');
                document.querySelector('.content').clientHeight
                const page = goods[currentType.value].page+1;
                getHomeGoods(currentType.value,page).then(res=>{
                    goods[currentType.value].list.push(...res.goods.data);
                    goods[currentType.value].page+= 1;
                })

                // 完成上拉。等数据请求完成，要将新加载数据展示出来
                bscroll.finishPullUp();
                // 重新计算高度
                bscroll.refresh();
            })

            
        })
        // 点击可以更换商品内容
        const tabClick=(index)=>{
            
            let types = ['sales','new','recommend'];
            currentType.value = types[index];
            nextTick(()=>{
                // 重新计算高度
                bscroll && bscroll.refresh();
            })
        }

        // 监听任何一个变量有变化
        watchEffect(()=>{
            nextTick(()=>{
                // 重新计算高度
                bscroll && bscroll.refresh();
            })
        })
        const bTop = ()=>{
            bscroll.scrollTo(0,0,500);
        }
        return {
            // banner,
            recommends,
            tabClick,
            goods,
            showGoods,
            isTabFixed,
            banref,
            bTop,
            banners
        }
    }
}
</script>

<style scoped>
.banners img{
    width: 100%;
    height: auto;
}
#home{
    height: 100vh;
    position: relative;
}
.wrapper{
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: hidden;
}
.content{

}
</style>